<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div{
				width: 100px;
				height: 100px;
				background-color: red;
				/* transition: margin-left 3s; */
				
				animation-name: ls;
				/* 告诉系统动画的持续时长 */
				animation-duration: 2s;
			}
			/* 告诉系统我们需要创建一个名称叫ls的动画 */
			@keyframes ls{
				from{
					margin-left: 0;
				}
				
				to{
					margin-left: 500px;
				}
			}
			
			
			
		/* 	div:hover{
				margin-left: 500px;
			} */
		</style>
	</head>
	<body>
		<!-- 
		1.过渡和动画之间的异同
		 1.1不同点 
		 过渡必须人为的触发才会执行
		 动画不需要人为的触发
		 
		 1.2相同点
		 过渡和动画都是用来给元素添加动画的
		 过渡和动画都是系统新增的一些属性
		 过渡和动画都需要满足三要素才能有效果
		 
		 animation-name 动画的名称
		 
		 -->
		<div></div>
	</body>
</html>